<template>
  <div class="theme">
    <div class="left">
      <ul class="NameList">
        <li v-for="(item, i) in friends" :key=i @click="A(item.id, i, item.username)" @mouseover='mouseOver(i)' @mouseleave='mouseLeave(i)' :class="select(i)">
          <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" style="height:30px;width:40px" />
          <span class="name">{{item.id}}</span>
          <span class="address">{{item.username}}</span>
        </li>
      </ul>
    </div>
    <div class="right">
      <chat :friendData="chooseUser" :list="arrMessages" :stompClient="stompClient1"></chat>
    </div>
  </div>
</template>

<script>
import chat from './chat.vue'
import SockJS from 'sockjs-client'
import Stomp from 'webstomp-client'
export default {
  components: {
    chat
  },
  data() {
    return {
      friends: null,
      navLiNum: -1,
      clickIndex: -1,
      chooseUser: null,
      arrMessages: [],
      serverUrl: 'http://121.5.221.199:8080/websocket',
      stompClient1: null,
      flag: true
    }
  },
  created() {
    this.$axios({
      method: 'get',
      url: 'http://121.5.221.199:8080/user/all-user',
      headers: { 'token': sessionStorage.getItem("token") }
    }).then((response) => {
      this.friends = response.data.data
      for (var item in this.friends) {
        // console.log('wwww', item)
        this.arrMessages.push({ 'id': this.friends[item].id, 'info': '' });
      }
      console.log('wwwwwww', this.arrMessages)
      // this.flag = false;
    }).catch((error) => {
      console.log(error)
      console.log('錯了錯了')
      return null
    })
    // Thread.Sleep(3000)
    var socket = new SockJS(this.serverUrl)
    this.stompClient1 = Stomp.over(socket)
    var than = this
    console.log("12");
    this.stompClient1.connect({ 'token': sessionStorage.getItem('token') }, function (meg) {
      console.log("meg", meg);
      let userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
      // debugger
      than.stompClient1.subscribe('/topic/' + userInfo.id, function (message) {
        let content = JSON.parse(message.body)
        console.log("content", content)
        // debuggers

        // TODO
        for (var i = 0; i < than.arrMessages.length; ++i) {

          if (than.arrMessages[i].id == content.data.fromId) {
            let time = new Date()
            than.arrMessages[i].info += `<div  style="float:left;margin:3px 0; clear:both" class="send"><div>${time}</div><div class="sendImg"><img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" style="height:30px" class="chaticon" /> <span class="chatcontent">${content.data.message} </span>  </div>   </div>`
            than.$set(than.arrMessages, i, than.arrMessages[i])
            console.log('夫', than.arrMessages)
            console.log('aaaaaaa', content)
            break
          }
        }

      }, { 'token': sessionStorage.getItem('token') })
      than.$message({
        message: '与服务器建立连接',
        type: 'success'
      })

    }, function (error) {
      console.log(error);
      than.stompClient1 = null
      than.$message.error('连接失败')
    })
  },
  beforeDestroy() {
    if (this.stompClient1 != null) {
      this.stompClient1.disconnect()
    }
  },
  methods: {
    select(index) {
      var str = ''
      if (index === this.clickIndex) {
        str += 'clickBC'
      }
      if (index === this.navLiNum) {
        str += 'act'
      }
      return str
    },
    A(data, index, name) {
      this.clickIndex = index
      this.chooseUser = { 'id': data, 'name': name }
      // this.$router.push('/log')
    },
    mouseOver(index) {
      this.navLiNum = index
    },
    mouseLeave() {
      this.navLiNum = ''
    }
  }
}
</script>

<style lang="less" scope>
/* CSS区分大小写 */

/* 通用样式 */
* {
  margin: 0;
  padding: 0;
}

.right {
  flex: 1;
  background-color: rgb(30, 30, 30);
  height: 100%;
  /* position: absolute; */
  /* clear: both; */
}

.theme {
  /* background-color: rgb(30, 30, 30); */
  width: 100%;
  height: 100vh;
  display: flex;
  background-color: #f5f5f5;
}

.act {
  background: salmon !important;
}

.clickBC {
  background-color: red !important;
}
.left {
  width: 25%;
  height: 90%;
  box-sizing: border-box;
}
.NameList {
  width: 100%;
  padding: 24px 0; /* 上右下左 */
  background-color: #f3f3f3;
  height: 100%;
  box-sizing: border-box;
  overflow: auto;
}
.NameList li {
  list-style: none; /* 去除列表项前的标号 */
  /* width:50%; */
  height: 50px;
  display: flex;
  // justify-content: space-between;
  align-items: center;
  background-color: white;
  border: 1px solid #ededf5; /* 线宽 样式 颜色 */
  padding: 10px; /* 上下、左右 */
  img {
    width: 50px;
  }
  .name {
    display: flex;
    flex: 1;
  }
  .address {
    display: flex;
    justify-content: flex-end;
  }
  span {
    font-size: 16px;
  }
}
.NameList span.NameIcon {
  width: 50px;
  height: 50px;
  line-height: 50px;
  background: blue;
  color: white;
  font-size: 35px;
  text-align: center; /* 文字居中 */
  float: left;
}
.NameList span.girl {
  background: #ff07fa;
}
.NameList img {
  width: 50px;
  height: 50px;
  float: left;
}
.NameList p {
  width: 50px;
  height: 50px;
  line-height: 50px;
  background: blue;
  color: white;
  font-size: 35px;
  text-align: center;
  float: left;
}
.NameList span.name {
  float: left;
  width: 110px;
  height: 100%;
  margin-left: 5px;
  font-size: 20px;
  overflow: hidden; /* 溢出时隐藏溢出部分 */
}
.send {
  color: #000;
  display: flex;
  flex-direction: column;
  .sendImg {
    margin-top: 8px;
    display: flex;
    align-items: center;
    .chatcontent {
      border: 1px solid #fff;
      background: #fff;
      margin-left: 4px;
      border-radius: 3px;
      padding: 3px 6px;
    }
  }
}
</style>

